import React from 'react'
import style from './SideMenu.module.css'
import { sideMenuList } from './mockup'
import { Menu } from 'antd';
import { GifOutlined } from '@ant-design/icons';

export const SideMenu: React.FC = () => {
  return (
    <Menu mode='vertical' className={style['side-menu']}>
      {
       sideMenuList.map((m,index) => {
        return (
          <Menu.SubMenu 
            key={`side-menu-${index}-${Math.random()}`}
            title={<span><GifOutlined />{m.title}</span>}
          >
            {
              m.subMenu.map((sm, smindex) => {
                return (
                  <Menu.SubMenu
                    key={`side-menu-${smindex}-sm${Math.random() * 0.002}`}
                    title={<span><GifOutlined />{sm.title}</span>}
                  >
                    {
                      sm.subMenu.map((sms, smsindex) => {
                        return (  
                          <Menu.Item
                            key={`side-menu-${smsindex}-sms-${Math.random() * 0.05}`}
                          >
                            <span>
                              <GifOutlined />{sms}
                            </span>
                          </Menu.Item>
                        )
                      })
                    }
                  </Menu.SubMenu>
                )
              })
            }
          </Menu.SubMenu>
        ) 
       }) 
      }
    </Menu>
  )
}
